<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    width: 1200px;
    height: 300px;
    object-fit: cover;
    margin: 20px;
  }
  body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
</style>

<body>
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/1.jpg" src="./img/13.jpg"  alt="">
    <img  data-src="./img/2.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/3.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/4.jpg" src="./img/13.jpg" alt="">
    <img  data-src="./img/5.jpg" src="./img/13.jpg" alt="">
    
    <img  data-src="./img/6.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/7.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/8.png" src="./img/13.jpg" alt="">
    <img data-src="./img/9.png" src="./img/13.jpg" alt="">
    <img data-src="./img/10.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/11.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/12.jpg" src="./img/13.jpg" alt="">
    <img data-src="./img/13.jpg" src="./img/13.jpg" alt="">
</body>
<script>
    var images = document.getElementsByTagName("img");
    function callback(entries) {
        for (let i of entries) {
            if (i.isIntersecting) {
                let img = i.target;
                let trueSrc = img.getAttribute("data-src");
                img.setAttribute("src", trueSrc);
                observer.unobserve(img);
            }
        } 
    }
    const observer = new IntersectionObserver(callback);
    for (let i of images) {
       observer.observe(i);
    }

</script>
</html>